<template>
  <el-form ref="formRef" :model="form" label-width="120px" size="default">
    <el-form-item>
      <h2>
        <el-link type="warning">job推送配置生成器</el-link>
      </h2>
    </el-form-item>
    <el-form-item label="开始时间：">
      <el-date-picker
        v-model="form.startTime"
        type="datetime"
        :editable="false"
        placeholder="选择日期时间"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item label="间隔时间(分钟)：">
      <el-input v-model.number="form.intervalTime" clearable class="input-width"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">生成脚本</el-button>
      <el-button type="info" @click="nextFn">下一个</el-button>
    </el-form-item>
    <el-form-item label="脚本：">
      <el-input autosize type="textarea" v-model="form.scriptString" readonly></el-input>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive } from "vue";
import { format } from "./js/timeFromat";
// do not use same name with ref
const form = reactive({
  startTime: "", // 开始时间
  intervalTime: "", // 间隔时间
  endTime: "", // 结束时间
  scriptString: "" // 脚本
});

const onSubmit = () => {
  let d = new Date(form.startTime).getTime();
  form.endTime = format(d + form.intervalTime * 1000 * 60);
  console.log(form.endTime);
  form.scriptString = `"startDate":"${form.startTime}",
"endDate":"${form.endTime}",
"minutes":"-1",`;
};
const nextFn = () => {
  if (!form.scriptString) return;
  form.startTime = form.endTime;
  onSubmit();
};
</script>

<style>
.input-width {
  width: 500px;
}
</style>
